<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            height: 600px;
            background-color: #ccc;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
        }
        header {
            width: 100%;
            height: 60px;
            background-color:red;
        }
        main {
            width: 100%;
            /* 因为父元素的高度不确定 高度不能设置*/
            flex:1; 
            background-color: pink;
            display: flex;

        }
        main article {
            height: 100%;
            flex: 4;
            background-color: green;
        }
        main aside {
            height: 100%;
            flex: 1;
            background-color: #20b7ff;
        }
        footer {
            width: 100%;
            height: 80px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <!-- 父元素的宽度和高度不确定 所以得用伸缩布局 -->
    <!-- 即就算改变父元素的宽和高 布局不会变化 -->
    <div class="box">
        <header></header>
        <main>
            <aside></aside>
            <article></article> 
        </main>
        <footer></footer>
    </div>
    
</body>
</html>